/*
 * @Author: llixxm
 * @Date: 2021-08-06 14:45:30
 * @Description: 小部件布局
 */
import React, { Component } from 'react';
import './index.less'

export default class WidgetWraper extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    static defaultProps = {
        title: '', //标题
        searchContent: '', //查询区过滤组件
        extendContent: '', //扩展区域--标题区域最右侧
        bodyContent: '', //内容
        widgetId: '', //小部件样式id
        showLinkBtn: false, // 是否显示联查按钮,默认不显示
        titleMinWidth: '120px', // 标题最小宽度
    };

    /**
     * @description: 标题点击事件,打开小应用
     */    
     titleClick = () => {
        let { titleClick } = this.props;
        titleClick &&  titleClick(); 
    }

    render(){
        let { title, searchContent, extendContent, bodyContent, widgetId, showLinkBtn, titleMinWidth, outStyle={} } = this.props
        return(
            <div className='def-widget-container nc-theme-Widgets-bgc' id={widgetId}>
                <div className='widget-head nc-theme-Widgets-bgc'>
                    <div className="widget-head-title nc-theme-Widgets-font-c" style={{minWidth: titleMinWidth}} onClick={this.titleClick}>
                        {title}
                        {showLinkBtn && <i className="iconfont icon-xiaobujianrukou"/>}
                    </div>
                    {searchContent && <div className="widget-head-search-container">
                        {searchContent}
                    </div>}
                    {extendContent && <div className="widget-head-extend-area">
                        {extendContent}
                    </div>}
                </div>
                <div className='widget-body' style={outStyle}>
                    {bodyContent}
                </div>
            </div>
        )
    }
}
